<template>
  <el-form :model="formData">
    <el-row>
      <el-col :span="24">
        <el-form-item prop="label"
                      label="标签"
                      :label-width="labelWidth">
          <el-input :value="origin.label"
                    @input="handleInput('label', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="type"
                      label="类型"
                      :label-width="labelWidth">
          <dictionary-select group="CONTROL"
                             :value="origin.type"
                             @input="handleInput('type', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="origin.type === 'dictionary'"
                      prop="group"
                      label="字典组"
                      :label-width="labelWidth">
          <dictionary-group-select :value="origin.group"
                                   @input="handleInput('group', arguments)" />
        </el-form-item>
        <el-form-item v-else-if="origin.type === 'advance'"
                      prop="control"
                      label="组件名"
                      :label-width="labelWidth">
          <el-input :value="origin.control"
                    @input="handleInput('control', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="name"
                      label="字段"
                      :label-width="labelWidth">
          <el-input :value="origin.name"
                    @input="handleInput('name', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item prop="value"
                      label="默认值"
                      :label-width="labelWidth">
          <el-input :value="origin.value"
                    @input="handleInput('value', arguments)" />
        </el-form-item>
      </el-col>
      <!-- 自定义验证类型 -->
      <el-col v-if="origin.type === 'input' || origin.type === 'custom_form_valid'"
              :span="24">
        <el-form-item prop="validateName"
                      label="验证类型"
                      :label-width="labelWidth">
          <form-validate :value="origin.validateName"
                         clearable
                         @input="handleInput('validateName', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="hidden"
                      label="显示"
                      :label-width="labelWidth">
          <el-switch :value="!origin.hidden"
                     @input="handleHidden" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item v-if="origin.type === 'advance'"
                      prop="preset"
                      label="预设值"
                      :label-width="labelWidth">
          <object-input :value="origin.preset"
                        @input="handleInput('preset', arguments)" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item v-if="origin.type === 'advance' || origin.type === 'area'"
                      prop="transform"
                      label="附加属性"
                      :label-width="labelWidth">
          <object-input :value="origin.transform"
                        @input="handleInput('transform', arguments)" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import DictionarySelect from "../../basic/DictionarySelect.vue";
import DictionaryGroupSelect from "../../advance/DictionaryGroupSelect.vue";
import ObjectInput from "../../basic/ObjectInput.vue";
// import FormValidate from "@components/basic/FormValidate";
export default {
  name: "ItemAttributeEditor",
  components: {
    DictionarySelect,
    DictionaryGroupSelect,
    ObjectInput,
    // FormValidate
  },
  props: {
    value: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      formData: {},
      labelWidth: "75px",
      variables: [{}]
    };
  },
  computed: {
    origin () {
      return this.value || {};
    }
  },
  methods: {
    createData () {
      return { ...this.origin, ...this.formData };
    },
    handleInput (name, [value]) {
      this.formData[name] = value;
      this.$emit("input", this.createData());
    },
    handleHidden (value) {
      this.formData.hidden = !value;
      this.$emit("input", this.createData());
    }
  }
};
</script>
